<template>
  <div id="schoolRecruit">
    <el-row :gutter="8">
      <el-col :span="5">
        <el-tabs type="border-card" :stretch="true">
          <el-tab-pane label="专业筛选">
            <div class="menu"
                 style="background-color:white;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <div v-popover:pop0 v-if="professionMenu[0]">
                <div class="menu-item">
                  <div class="menu-text">{{ professionMenu[0].professionName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="pop0"
                    placement="right-start"
                    :title="professionMenu[0].professionName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in professionMenu[0].childCategory" :key="index">
                      <el-link :href="professionHref(item.professionName)" :underline="false" target="_blank">
                        {{ item.professionName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>

              <div v-popover:pop1 v-if="professionMenu[1]">
                <div class="menu-item">
                  <div class="menu-text">{{ professionMenu[1].professionName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="pop1"
                    placement="right-start"
                    :title="professionMenu[1].professionName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in professionMenu[1].childCategory" :key="index">
                      <el-link :href="professionHref(item.professionName)" :underline="false" target="_blank">
                        {{ item.professionName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div v-popover:pop2 v-if="professionMenu[2]">
                <div class="menu-item">
                  <div class="menu-text">{{ professionMenu[2].professionName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="pop2"
                    placement="right-start"
                    :title="professionMenu[2].professionName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in professionMenu[2].childCategory" :key="index">
                      <el-link :href="professionHref(item.professionName)" :underline="false" target="_blank">
                        {{ item.professionName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div v-popover:pop3 v-if="professionMenu[3]">
                <div class="menu-item">
                  <div class="menu-text">{{ professionMenu[3].professionName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="pop3"
                    placement="right-start"
                    :title="professionMenu[3].professionName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in professionMenu[3].childCategory" :key="index">
                      <el-link :href="professionHref(item.professionName)" :underline="false" target="_blank">
                        {{ item.professionName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div v-popover:pop4 v-if="professionMenu[4]">
                <div class="menu-item">
                  <div class="menu-text">{{ professionMenu[4].professionName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="pop4"
                    placement="right-start"
                    :title="professionMenu[4].professionName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in professionMenu[4].childCategory" :key="index">
                      <el-link :href="professionHref(item.professionName)" :underline="false" target="_blank">
                        {{ item.professionName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div v-popover:pop5 v-if="professionMenu[5]">
                <div class="menu-item">
                  <div class="menu-text">{{ professionMenu[5].professionName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="pop5"
                    placement="right-start"
                    :title="professionMenu[5].professionName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in professionMenu[5].childCategory" :key="index">
                      <el-link :href="professionHref(item.professionName)" :underline="false" target="_blank">
                        {{ item.professionName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div v-popover:pop6 v-if="professionMenu[6]">
                <div class="menu-item">
                  <div class="menu-text">{{ professionMenu[6].professionName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="pop6"
                    placement="right-start"
                    :title="professionMenu[6].professionName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in professionMenu[6].childCategory" :key="index">
                      <el-link :href="professionHref(item.professionName)" :underline="false" target="_blank">
                        {{ item.professionName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div v-popover:pop7 v-if="professionMenu[7]">
                <div class="menu-item">
                  <div class="menu-text">{{ professionMenu[7].professionName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="pop7"
                    placement="right-start"
                    :title="professionMenu[7].professionName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in professionMenu[7].childCategory" :key="index">
                      <el-link :href="professionHref(item.professionName)" :underline="false" target="_blank">
                        {{ item.professionName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="职类筛选">
            <div class="menu"
                 style="background-color:white;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <div v-popover:popover0 v-if="menu[0]">
                <div class="menu-item">
                  <div class="menu-text">{{ menu[0].jobCategoryName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="popover0"
                    placement="right-start"
                    :title="menu[0].jobCategoryName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in menu[0].childCategory" :key="index">
                      <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">
                        {{ item.jobCategoryName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>

              <div v-popover:popover1 v-if="menu[1]">
                <div class="menu-item">
                  <div class="menu-text">{{ menu[1].jobCategoryName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="popover1"
                    placement="right-start"
                    :title="menu[1].jobCategoryName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in menu[1].childCategory" :key="index">
                      <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">
                        {{ item.jobCategoryName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div v-popover:popover2 v-if="menu[2]">
                <div class="menu-item">
                  <div class="menu-text">{{ menu[2].jobCategoryName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="popover2"
                    placement="right-start"
                    :title="menu[2].jobCategoryName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in menu[2].childCategory" :key="index">
                      <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">
                        {{ item.jobCategoryName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div v-popover:popover3 v-if="menu[3]">
                <div class="menu-item">
                  <div class="menu-text">{{ menu[3].jobCategoryName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="popover3"
                    placement="right-start"
                    :title="menu[3].jobCategoryName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in menu[3].childCategory" :key="index">
                      <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">
                        {{ item.jobCategoryName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div v-popover:popover4 v-if="menu[4]">
                <div class="menu-item">
                  <div class="menu-text">{{ menu[4].jobCategoryName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="popover4"
                    placement="right-start"
                    :title="menu[4].jobCategoryName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in menu[4].childCategory" :key="index">
                      <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">
                        {{ item.jobCategoryName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div v-popover:popover5 v-if="menu[5]">
                <div class="menu-item">
                  <div class="menu-text">{{ menu[5].jobCategoryName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="popover5"
                    placement="right-start"
                    :title="menu[5].jobCategoryName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in menu[5].childCategory" :key="index">
                      <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">
                        {{ item.jobCategoryName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div v-popover:popover6 v-if="menu[6]">
                <div class="menu-item">
                  <div class="menu-text">{{ menu[6].jobCategoryName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="popover6"
                    placement="right-start"
                    :title="menu[6].jobCategoryName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in menu[6].childCategory" :key="index">
                      <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">
                        {{ item.jobCategoryName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div v-popover:popover7 v-if="menu[7]">
                <div class="menu-item">
                  <div class="menu-text">{{ menu[7].jobCategoryName }}</div>
                  <i class="el-icon-arrow-right"></i></div>
                <el-popover
                    ref="popover7"
                    placement="right-start"
                    :title="menu[7].jobCategoryName"
                    width="580"
                    trigger="hover">
                  <hr style="border: 0.5px solid #dcdee1">
                  <div class="menu-item-hover">
                    <div v-for="(item,index) in menu[7].childCategory" :key="index">
                      <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">
                        {{ item.jobCategoryName }}
                      </el-link>
                    </div>
                  </div>
                </el-popover>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="19">
        <CRCarousel></CRCarousel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CRCarousel from "@/components/common/CRCarousel";
import JobCategoryList from "../../utils/jobCategoryList"
import Profession from "../../utils/profession"

export default {
  name: "SRMenu",
  components: {
    CRCarousel
  },
  data() {
    return {
      menu: JobCategoryList,
      professionMenu: Profession,
    }
  },
methods: {
  categoryHref(keywords){
    return 'https://element.eleme.io/'+keywords;
  },
  professionHref(keywords){
    return 'https://element.eleme.io/'+keywords;
  }
},
}
</script>

<style scoped>
.grid-content {
  min-height: 50px;
  color: white;
  line-height: 50px;
  font-size: 14px;
}
.menu-item-hover {
  width: 670px;
}

.menu-item {
  height: 39px;
  line-height: 39px;
}

.menu-text {
  display: inline-block;
  width: 160px;
  text-align: left;
  padding-left: 20px;
}

.menu-item-hover div {
  width: 145px;
  height: 32px;
  line-height: 32px;
  float: left;
}
/deep/ .el-tabs__content{
  padding:0 ;
}
</style>